/* global React */
// Schedule — grid of round cards for the season.
function ScheduleScreen({ setTab }) {
  const { RoundCard } = window.GT7LeagueDesignSystem_258437;
  const D = window.GT7DATA;
  const [, tick] = React.useState(0);
  React.useEffect(() => { const h = () => tick(t => t + 1); window.addEventListener('gt7-vote', h); return () => window.removeEventListener('gt7-vote', h); }, []);
  return (
    <div>
      <PageTitle eyebrow={D.season} title="Race Schedule" note="Race day & time TBD · two races per round" />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: 16 }}>
        {D.schedule.map(r => (
          <RoundCard key={r.round} round={r.round} date={`${r.date}, 2027`} track={r.track}
            featureCar={r.featureCar} laps={r.laps} sprintClass={r.sprint + (r.fromVote ? ' · set by vote' : '')} status={r.status}
            onClick={() => setTab('Results')} />
        ))}
      </div>
    </div>
  );
}

function PageTitle({ eyebrow, title, note }) {
  return (
    <div style={{ marginBottom: 24 }}>
      {eyebrow && <div style={{ fontFamily: 'var(--font-display)', fontSize: 11, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 8 }}>{eyebrow}</div>}
      <h1 style={{ margin: 0, fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 34, color: 'var(--text-strong)', letterSpacing: '-.01em' }}>{title}</h1>
      {note && <p style={{ margin: '8px 0 0', fontSize: 14, color: 'var(--text-muted)' }}>{note}</p>}
    </div>
  );
}
window.ScheduleScreen = ScheduleScreen;
window.PageTitle = PageTitle;